<template>
  <transition>
    <div class="home-container">
      <!-- 头部固定栏 -->
      <div class="header">
        <img src="@/assets/images/头像空.png" alt="">
        <span>{{real_name}}</span>
      </div>

      <!-- 内容列表 -->
      <div class="content-list">

        <!-- 循环部分 -->
        <div class="list-info" v-for="menu in menus.slice(-1)" :key="menu.id">
          <div class="title">
            <h3>{{menu.name}}</h3>
          </div>

          <div v-for="item in menu.children" :key="item.id">
            <router-link :to="menu.path+'/'+item.path" tag="div">
              <component :is="item.path" :remark="item.remark" :name="item.name"></component>
            </router-link>
          </div>    
        </div>

      </div>
    </div>
  </transition>
</template>

<script>

import { mapGetters } from 'vuex';
import purchase from "@/components/supply/purchase"
import order from "@/components/supply/order"

export default {
  name: 'app',
  data() {
    return {
      componentName:"",
      userData:""
    }
  },
  created() {
     console.log(this.menus);


      var a = this.menus.slice(-1)[0]
     console.log(a.children)











    // this.userData = this.menus;
    // console.log(this.userData);
    // for(var i=0;i<userData.length;i++){
    //   this.componentName[i] = 
    // }
    // console.log(this.componentName);
    
  },
  methods:{
    
  },
  computed: {
    ...mapGetters([
      'menus',
      'real_name'
    ]),
    // getPath(path){
    //   return this.firstchild = path;
    // }
  },
  components:{
    purchase,
    order
  }
}
</script>

<style lang="scss">
.home-container {
  width: 100%;
  min-height: 100vh;
  background-color: #f7f7f7;
  padding-top: 2rem;
  .header {
    width: 100%;
    height: 3rem;
    line-height: 3rem;
    position: fixed;
    background-color: #f7f7f7;
    z-index: 9999;
    top: 0;
    left: 0;
    img {
      margin-left: 1rem;
      margin-right: 0.5rem;
      // vertical-align: middle;
      position: relative;
      top: 0.5rem;
      width: 2rem;
    }
    span {
      // font-size: 1.3rem;
      font-size: 22px;
      font-weight: bold;
    }
  }
  .content-list {
    padding: 0.6rem;
    .list-info {
      margin-top: 2rem;
      .title {
        border-left: 4px solid #77c5e4;
        h3 {
          font-size: 14px;
          color: #7b7b7b;
          margin-left: 0.4rem;
          font-weight: bold;
        }
      }
      .ch {
        background-color: #fff;
        padding: 1rem;
        &.ch-one {
          margin-top: 0.6rem;
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
          .body {
            padding-top: 8px;
            p {
              color: #ababab;
              font-size: 14px;
            }
          }
        }
        &.ch-two {
          margin-top: 3px;
          border-bottom-left-radius: 5px;
          border-bottom-right-radius: 5px;
          .body {
            padding-top: 1rem;
            width: 100%;
            border-top: 1px solid #eee;
            margin-top: 0.5rem;
          }
        }
        .top {
          display: flex;
          justify-content: space-between;
          line-height: 22px;
          span:first-child {
            font-size: 22px;
            font-weight: bold;
          }
          span:last-child {
            font-size: 14px;
            color: #33abd8;
          }
        }
      }
    }
  }
}
.mui-grid-view.mui-grid-9 {
  background-color: #fff;
  border: none;
  img {
    width: 1.5rem;
    height: 1.5rem;
  }
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell {
  padding: 0;
  border: none;
}
.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
  color: #ababab;
  font-size: 14px;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell > a:not(.mui-btn) {
  padding: 0;
}
</style>
